<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="config/css/config.css">
    <link rel="stylesheet" href="style/index.css">
    <link rel="stylesheet" href="style/free.css">
    <style>
        ::-webkit-scrollbar {
            display: none;
            /* 或者 width: 0; height: 0; */
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="configtest"></div>
        <!-- 组件 -->
        <div style="height: 50px; background-color: #409EFF;display: flex; align-items: center; justify-content: end;">
            <div style="margin-right: 50px;">
                <el-button size="small" @click="window.history.back()">返回</el-button>
                <el-button size="small" :loading="loading" @click="sumbit" type="success">提交</el-button>
            </div>
        </div>
        <el-row>
            <el-col :span="2.5">
                <div style="width: 100%; height: calc(100vh - 50px);">
                    <div>组件</div>
                    <div style=" width: 200px; display: flex; flex-wrap: wrap; justify-content: space-between;">
                        <div @click="handle(item)" v-for="(item,index) in data" :key="index"
                            style="text-align: center; line-height: 60px; margin-top: 10px; width: 60px; height: 60px; background-color: #409EFF; color:#fff">
                            {{item.name}}</div>
                    </div>
                    <!-- <div class="px-2 py-1 bg-warning mb-1" @click="handle(item)" v-for="(item,index) in data" :key="index">
                        {{item.name}}
                    </div> -->
                </div>
            </el-col>
            <el-col :span="10">
                <!--   -->
                <div
                    style="position: relative; margin: auto; width: 700px; flex-shrink: 1;background-color: #e0e0e0; height:calc(100vh - 50px);">
                    <div id="test" style="position: absolute;z-index: 9; margin: auto;transform: scale(0.5) translate(-50%,-50%); width:1400px;height:200%;
                        background-color: antiquewhite; overflow-y: scroll;">
                        <render :data="form"></render>
                        <!-- <div style="width: 1200px; margin: auto;">
                            <el-input :value=""  :name=""></el-input>
                            <el-button :type=""></el-input>
                            <component :value="" :name="" is="el-input"></component>
                            <component :type="" is="el-button"></component>
                        </div> -->
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div style="margin: auto; width: 771px; height: calc(100vh - 50px); overflow-y:scroll;">
                    <div class="table_titel">
                        <div class="titel">
                            配置属性{{SelectElement?'(当前选中'+SelectElement+')':''}}
                            <i @click="environment(1)" class="el-icon-mobile-phone"></i>
                            <i @click="environment(2)" class="el-icon-monitor"></i>
                        </div>
                        <div class="operation">
                            <el-button :type="isSwitch?'danger':'success'" size="small"
                                @click="hadnlelayer">{{isSwitch?'取消':'布局拖拽'}}</el-button>
                            <el-button type="primary" size="small" @click="handle1">恢复</el-button>
                        </div>
                    </div>
                    <form style="width: 100%; display: flex;  flex-direction: column;">
                        <render-config :data="form"></render-config>
                    </form>
                </div>
            </el-col>
        </el-row>
    </div>
    <script src="../../../utils/jquery-3.6.0.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../utils/vue.min.js"></script>
    <script src="../../../utils/vuex.min.js"></script>
    <script src="../../../component/elementUI/index.js"></script>
    <script src="../../../utils/compressor.js"></script>
    <script src="../../../utils/Sortable.min.js"></script>
    <script src="../../../utils/hls.js"></script>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/jquery.qrcode.min.js"></script>
    <script src="../../../utils/websocket.js"></script>
    <!-- 组件配置 -->
    <script src="config/store.js"></script>
    <script src="config/utils.js"></script>
    <!-- 组件 -->
    <script src="config/component/Swiper.js"></script>
    <script src="config/component/LayOut.js"></script>
    <script src="config/component/Card.js"></script>
    <script src="config/component/LiveBroadcast.js"></script>
    <script src="config/component/NavItem.js"></script>
    <script src="config/component/Table.js"></script>
    <script src="config/component/Form.js"></script>
    <script src="config/component/Tab.js"></script>
    <script src="config/component/ShopList.js"></script>
    <script src="config/component/PlateCore.js"></script>
    <script src="config/component/Pic.js"></script>
    <script src="config/component/TextBox.js"></script>
    <script src="js/Config.js"></script>
</body>

</html>